<template>
  <div class="addressSelect">
    <el-select v-model="address.province" placeholder="请选择" :disabled="disabled" @change="getCity">
      <el-option
        v-for="item in provinceOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="address.city" placeholder="请选择" :disabled="disabled" @change="getArea">
      <el-option
        v-for="item in cityOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="address.area" placeholder="请选择" :disabled="disabled" @change="getTown">
      <el-option
        v-for="item in areaOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="address.town" placeholder="请选择" :disabled="disabled" @change="setTown">
      <el-option
        v-for="item in towmOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getAddress } from '@/api/hospital/index'
export default {
  props: ['disabled'],
  data () {
    return {
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      towmOptions: [],
      address: {
        province: '',
        city: '',
        area: '',
        town: ''
      }
    }
  },
  created () {
    this.getProvice(0)
  },
  watch: {
    address: {
      handler (newVal, oldVal) {
        this.$emit('changeAddress', newVal)
      },
      deep: true
    }
  },
  methods: {
      init (val) {
        let that = this
        // 顺序执行
        Promise.resolve().then(function(){
          // 查询区县
          return  val.province ? that.getCity(val.province, true) : ''
        }).then(() => {
          // 查询城镇
          return val.city ? that.getArea(val.city, true) : ''
        }).then(() => {
          // 查询街道
          return val.area ? that.getTown(val.area, true) : ''
        })
        // 数据回显
        this.address = {...val}
      },
      // 清空数据
      clearAddress() {
        for (let key in this.address) {
          this.address[key] = ''
        }
      },
      // 获取省市
      async getProvice (id) {
        await getAddress(id)
        .then(res => {
          if (res.code === 200) {
            this.provinceOptions = res.data
            this.cityOptions = []
            this.areaOptions = []
            this.towmOptions = []
          }
        })
      },
      // 获取城市
      getCity (id, ifclear) {
        getAddress(id)
        .then(res => {
          if (res.code === 200) {
            // 清空数据
            if (!ifclear) {
              this.address.city = ''
              this.address.area = ''
              this.address.town = ''
            }
            this.cityOptions = res.data
            this.areaOptions = []
            this.towmOptions = []
          }
        })
      },
      // 获取区县
      getArea (id, ifclear) {
        getAddress(id)
        .then(res => {
          if (res.code === 200) {
            // 清空数据
            if (!ifclear) {
              this.address.area = ''
              this.address.town = ''
            }
            this.areaOptions = res.data
            this.towmOptions = []
          }
        })
      },
      // 获取街道
      getTown (id, ifclear) {
        getAddress(id)
        .then(res => {
          if (res.code === 200) {
            // 清空数据
            if (!ifclear) {
              this.address.town = ''
            }
            this.towmOptions = res.data
          }
        })
      },
      // 设置选择值
      setTown () {
        this.$forceUpdate()
      }
  }
}
</script>

<style scoped>
</style>
